import { Button, Radio, RadioGroup } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import { VisibilityFilter } from '~/constants/todo-filter';

interface FooterProps {
  completedCount: number;
  activedCount: number;
  visibleFilter: VisibilityFilter;
  setVisibleFilter: React.Dispatch<React.SetStateAction<VisibilityFilter>>;
  onClearCompleted: () => void;
}

export default function Footer({
  completedCount,
  activedCount,
  visibleFilter,
  setVisibleFilter,
  onClearCompleted,
}: FooterProps) {

  return (
    <View className='flex justify-between items-baseline p-1'>
      <View className='flex items-center'>
        <Text className='font-bold text-[14px]'>{`${activedCount} ${activedCount === 1 ? 'item' : 'items'} left!`}</Text>
      </View>
      <RadioGroup
        className='justify-items-center'
        direction='horizontal'
        value={visibleFilter}
        onChange={(e) => setVisibleFilter(e.detail)}
      >
        <Radio name={VisibilityFilter.SHOW_ALL}>All</Radio>
        <Radio name={VisibilityFilter.SHOW_ACTIVE}>Active</Radio>
        <Radio name={VisibilityFilter.SHOW_COMPLETED}>Completed</Radio>
      </RadioGroup>
      <Button type='primary' onClick={onClearCompleted} disabled={completedCount === 0}>
        Clear completed
      </Button>
    </View>
  );
}
